<template>
	<div class="box">
		<p class="title">轮播图片{{pageName}}</p>
		<el-form :model="list" status-icon ref="form" label-width="110px" :rules="rules">
			<el-form-item label="标题" prop="name">
				<el-input v-model="list.name"></el-input>
			</el-form-item>
			<el-form-item label="排序" prop="sorting">
				<el-input v-model.number="list.sorting"></el-input>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-select v-model.number="list.status" placeholder="请选择">
					<el-option label="上架" :value="1"></el-option>
					<el-option label="下架" :value="2"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="图片地址" prop="path">
				<el-upload ref="upload" action="http://api.zhonpay.com/admin/upload/upload" name="image" :limit="1" list-type="picture" :file-list="fileList"
				 :on-success="uploadImgSuccess" :on-remove="uploadImgRemove">
					<el-button size="small" type="primary">点击上传</el-button>
					<div slot="tip">请上传jpg/png格式文件，且不超过1024kb</div>
				</el-upload>
			</el-form-item>

			<el-form-item class="whole-handle-btn-box">
				<el-button type="primary" @click="handleCertain">确定</el-button>
				<router-link class="back-btn" to="index">
					<el-button>返回</el-button>
				</router-link>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: {},
				pageName:'',
				pageType:1,
				fileList:[],
				rules: {
					name: {
						required: true,
						message: "标题不能为空",
						trigger: "blur"
					},
					sorting: {
						required: true,
						message: "排序不能为空",
						trigger: "blur"
					},
					// link: {required: true, message: '连接地址不能为空', trigger: 'change'},
					status: {
						required: true,
						message: "状态不能为空",
						trigger: "change"
					},
					path: {
						required: true,
						message: "图片不能为空",
						trigger: "blur"
					}
				}
			};
		},
		created(){
			this.isAdd();
		},
		methods: {
			isAdd() {
				if (this.$route.query.type === 2) {
					this.list = this.$route.query.info;
					this.pageName = '编辑';
					this.fileList.push({
						"url":this.list.path,
						"name":'image',
					});
				} else {
					this.pageName = '新增';
				}
				this.pageType = this.$route.query.type;
			},
			// 确定添加图片
			handleCertain() {
				const _this = this;
				this.$refs.form.validate(bool => {
					if (bool) {
						this.$confirm("您确定要添加么?", "提示", {
								confirmButtonText: "确定",
								cancelButtonText: "取消",
								type: "warning"
							})
							.then(() => {
								this.$axios({
									url: "admin/home/setShuffling",
									data: {
										id:_this.pageType===2?_this.list.id:'',
										name: _this.list.name,
										path: _this.list.path,
										status: _this.list.status,
										sorting: _this.list.sorting
									},
									success(res) {
										if (res.data.code === 200) {
											_this.$message({
												type: "success",
												message: res.data.msg
											});
											if(_this.pageType===2){
												_this.$router.go(-1);
											}else{
												_this.$refs.form.resetFields();
												_this.$refs.upload.clearFiles();
											}
										} else {
											_this.$message({
												type: "warning",
												message: res.data.msg
											});
										}
									}
								});
							})
							.catch(() => {});
					}
				});
			},
			uploadImgSuccess(response, file, fileList) {
				if (response.code === 200) {
					this.$message({
						message: response.msg
					});
					this.list.path = response.content.path;
				} else {
					this.$message({
						type: "warning",
						message: response.msg
					});
				}
			},
			// 移除上传成功的图片，刷新数据
			uploadImgRemove(event) {
				this.$set(this.$data.list, "path", "");
			}
		}
	};
</script>

<style scoped>
	.box {
		padding: 30px;
	}

	.el-form {
		width: 50%;
		margin: 0 auto;
	}

	.title {
		margin-bottom: 20px;
		font-size: 20px;
		text-align: center;
	}

	.back-btn {
		margin-left: 10px;
	}
</style>
